<template>
  <div class="ui-address ui-p-h component-class">
    <div class="address-container">
      <div class="address-body ui-1px-b ui-p-v">
        <!-- <div class="address-icon address-icon--left">
          <uiIcon type="icon-gouwuche" size="32"></uiIcon>
        </div>-->
        <div class="address-content ui-p-r">
          <div class="address-main-info ui-txt ui-flex ui-flex--between">
            <!-- 收货人姓名 -->
            <span>{{name}}</span>
            <!-- 收货人联系方式 -->
            <span>{{phone}}</span>
          </div>
          <!-- 收货详细地址 需要省市区加详细地址信息 -->
          <div class="address-info__shipping-address ui-txt txt-caption ui-m-t-xs ui-ellipsis--l2">
            <span>{{address}}</span>
          </div>
        </div>
        <!-- <div class="address-icon address-icon--right">
          <uiIcon icon-class="arrow" type="vant" size="32"></uiIcon>
        </div> -->
      </div>
      <!-- 操作信息 -->
      <div class="address-footer ui-flex ui-p-xs">
        <!-- 是不是默认地址信息 -->
        <div class="address-action address-action--left ui-flex-1">
          <uiCheckBox size="mini" :value="isChecked" color="#FFCC33" direction="horizontal">默认地址</uiCheckBox>
          <!-- <Checkbox icon-size="16px" v-model="isChecked"></Checkbox> -->
        </div>
        <div class="address-action address-action--right ui-flex-0">
          <uiBtn
            inline
            text
            size="mini"
            icon="ui-icon-edit"
            type="primary"
            url="/pages/demo/pages/address-edit/index"
          >
            <text class="van-button__text">编辑</text>
          </uiBtn>
          <uiBtn
            inline
            text
            size="mini"
            icon="ui-icon-delete"
            type="primary"
            to="/demo-page/address-edit/2"
          >
            <text class="van-button__text">删除</text>
          </uiBtn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import uiIcon from "components/base/icon/index.vue";
import uiCheckBox from "components/base/checkbox/index";
import uiBtn from "components/base/button/index";
export default {
  name: "name",
  externalClasses: ["component-class"],
  components: {
    uiIcon,
    uiCheckBox,
    uiBtn
  },
  props: {
    name: String,
    phone: String,
    address: String,
    isChecked: Boolean
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
.ui-address {
  position: relative;
  background-color: $fill-base;

  .address-icon {
    flex: 0 0 48px;
    i {
      font-size: 32px;
    }
  }
  .address-body {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;

    .address-content {
      flex: 1;
      width: 0;
    }
  }
}

.ui-address + .ui-address {
  margin-top: 20upx;
  &:after {
    @include line-bottom(#eee);
  }
}
</style>
